/*
 * @Author: jiayu
 * @Date: 2022-08-04 16:12:56
 * @LastEditors: jiayu
 * @LastEditTime: 2022-11-07 15:35:09
 * @Description:
 */
import Card from '@/components/Card';
import { Bar, G2 } from '@ant-design/plots';
import { Button, Popover, DatePicker } from 'antd';
import { Dispatch, memo, SetStateAction, useEffect, useRef, useState } from 'react';
import styles from './index.less';

import { FullscreenOutlined, FullscreenExitOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import React from 'react';
import { useModel } from '@umijs/max';
import { instance } from '@/services/jy-api/api';
import { useOrganizationalStore } from '';
import moment from 'moment';
import * as echarts from 'echarts';
const { RangePicker } = DatePicker;

const RightContentRender: React.FC<ChartSctionProps> = (props) => {
  const { isModal, full, fullHandle } = props
  const click = () => {
    if (isModal) {
      full && full(false)
    } else {
      fullHandle && fullHandle('section1')
      full && full(true)
    }
  }
  const dateFormat = 'YYYY/MM/DD';
  const defaultValue = [moment(moment(), dateFormat), moment(moment(), dateFormat)]
  return <div className={styles.rightToolBar}>
    <RangePicker defaultValue={defaultValue} format={dateFormat} style={{ marginRight: 10 }} />
    <Button icon={isModal ? <FullscreenExitOutlined /> : <FullscreenOutlined />} onClick={click}></Button>
  </div>
}

export interface ChartSctionProps {
  isModal?: boolean,
  full?: Dispatch<SetStateAction<boolean>>
  fullHandle?: (val: string) => void
}

const Index: React.FC<ChartSctionProps> = memo((props) => {
  const [config, setConfig] = useState<any>()
  const [rankList, setRankList] = useState<any[]>([])
  const { currentDepartmentId } = useModel('organizational')
  const colors = ["#2ec7c9",
    "#b6a2de",
    "#5ab1ef",
    "#ffb980",
    "#d87a80",
    "#8d98b3",
    "#e5cf0d",
    "#97b552",
    "#95706d",
    "#dc69aa",
    "#07a2a4",
    "#9a7fd1",
    "#588dd5",
    "#f5994e",
    "#c05050",
    "#59678c",
    "#c9ab00",
    "#7eb00a",
    "#6f5553",
    "#c14089"]

  const myChart = useRef<any>()
  const getData = () => {
    instance('/index/Screen/studyDuration', {
      params: {
        department_id: currentDepartmentId
      }
    }).then(data => {
      // 绘制图表
      myChart.current.setOption({
        dataset: {
          source: []
        },
        backgroundColor: '#252b31',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            // itemStyle: {
            //   normal: {
            //     color: (params) => {
            //       return colors[params.dataIndex];
            //     }
            //   }
            // }
          }
        ],
        legend: {}
      });
      const config = {
        data: data.data,
        xField: 'learn_num',
        yField: 'title',
        seriesField: 'title',
        xAxis: {
          label: {
            // 数值格式化为千分位
            formatter: (v: any) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
          },
          grid: {
            line: {
              style: {
                stroke: '#8291A9',
                lineWidth: 1,
                lineDash: [4, 5],
                strokeOpacity: 0.7,
              }
            }
          }
        },
        tooltip: {
          title: (val: string) => {
            return `${val} 平均学习时长（分钟）`
          },
          domStyles: {
            'g2-tooltip-title': {
              color: 'red'
            }
          }
        },
        legend: {
          flipPage: false,
          itemName: {
            style: {
              fill: '#ffffff',
              fontSize: 14
            },
          },
          position: 'top-left',
          marker: {
            style: (x: { r: 5, fill: '#5AD8A6', fillOpacity: 1, stroke: null }) => {
              return {
                ...x,
                r: 10,
              }
            },
          }
        },
        maxBarWidth: 20,
        interactions: [
          // {
          //   type: 'element-selected',
          // },
          {
            type: 'element-single-selected',
          },
        ],
        state: {
          // 设置 active 激活状态的样式
          active: {
            animate: { duration: 100, easing: 'easeLinear' },
            style: {
              lineWidth: 2,
              stroke: '#000',
            },
          },
        }
      }
      setConfig(config)
    })
  }
  useEffect(() => {

    myChart.current = echarts.init(document.getElementById('chart1'), 'dark');
    if (currentDepartmentId) {
      getData()
    }
    myChart.current.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: 0
    })
  }, [currentDepartmentId]);

  const Title = () => {
    return <div className={styles.titleContainer}>
      <div className={styles.title}>培训课程平均学习时长</div>
      <Popover content="培训课程平均学习时长描述了该部门的平均每人每月的学习时长(所有人学习总时长÷人数)">
        <ExclamationCircleOutlined className={styles.icon} />
      </Popover>
    </div>
  }

  return (
    <div className={styles.section}>
      <Card TitleRnder={<Title />} RightContentRender={<RightContentRender {...props} />}>
        <div className={styles.container}>
          <div className={styles.left}>
            <div id='chart1' style={{ width: '100%', height: '100%' }}></div>
          </div>
          <div className={styles.right}>
            <div className={styles.title}>炼油部人员数据统计</div>
            <Chart2 />
          </div>
        </div>
      </Card>
    </div>
  );
});

const Chart2 = () => {
  const data = [
    {
      year: '1951 年',
      value: 38,
    },
    {
      year: '1952 年',
      value: 52,
    },
    {
      year: '1956 年',
      value: 61,
    },
    {
      year: '1957 年',
      value: 145,
    },
    {
      year: '1958 年',
      value: 48,
    },
    {
      year: '19513 年',
      value: 38,
    },
    {
      year: '19524 年',
      value: 52,
    },
    {
      year: '19563 年',
      value: 61,
    },
    {
      year: '19572 年',
      value: 145,
    },
    {
      year: '19581 年',
      value: 48,
    },
  ];
  const config = {
    data,
    xField: 'value',
    yField: 'year',
    seriesField: 'year',
    legend: false,
    interactions: [{ type: 'element-active' }],
    state: {
      // 设置 active 激活状态的样式
      selected: {
        animate: { duration: 100, easing: 'easeLinear' },
        style: {
          lineWidth: 2,
          stroke: '#000',
        },
      },
    }
  };
  return <Bar height={300} {...config} />;
}

export default Index;

